<template>
  <Card class="!m-10px">
    <Button
      class="!mb-20px"
      type="primary"
      :disabled="!categoryStore.getCategory3Id"
      @click="
        showAddOrUpdateAttr({
          attrName: '',
          attrValueList: [],
        })
      "
    >
      <template #icon><PlusOutlined /></template>
      添加属性
    </Button>

    <Table
      :columns="columns"
      :dataSource="attrList"
      bordered
      :pagination="false"
      :loading="loading"
    >
      <template #bodyCell="{ column, index, text, record }">
        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
        <template v-if="column.dataIndex === 'attrValueList'">
          <Tag class="!mt-5px !mb-5px" color="blue" v-for="attrValue in text" :key="attrValue.id">
            {{ attrValue.valueName }}
          </Tag>
        </template>
        <template v-if="column.dataIndex === 'operator'">
          <Tooltip placement="top">
            <template #title>更新属性</template>
            <Button
              class="!bg-orange-500 !text-white mr-10px hover:(!border-orange-400 !bg-orange-400)"
              @click="showAddOrUpdateAttr(record)"
            >
              <template #icon><EditOutlined /></template>
            </Button>
          </Tooltip>
          <Tooltip placement="top">
            <template #title>删除属性</template>
            <Button class="!bg-red-500 !text-white hover:(!border-red-400 !bg-red-400)">
              <template #icon><DeleteOutlined /></template>
            </Button>
          </Tooltip>
        </template>
      </template>
    </Table>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'AttrList',
  });
</script>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Button, Table, Tooltip, Tag } from 'ant-design-vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { AttrListModel, PickAttrModel } from '/@/api/product/model/attrModel';
  import { getAttrListApi } from '/@/api/product/attr';
  import { useCategoryStore } from '/@/store/modules/category';

  const emits = defineEmits(['setIsShowAttrList', 'setCurrentAttr']);

  const categoryStore = useCategoryStore();

  const columns = [
    { title: '序号', className: 'w-70px !text-center', dataIndex: 'index' },
    { title: '属性名', dataIndex: 'attrName' },
    { title: '属性值列表', dataIndex: 'attrValueList' },
    { title: '操作', className: 'w-120px', dataIndex: 'operator' },
  ];

  const attrList = ref<AttrListModel>([]);
  const loading = ref<boolean>(false);

  // 等category3Id有值的时候才需要发送请求
  watch(
    // 监视的数据
    () => categoryStore.category3Id,
    // 触发的函数
    async (category3Id) => {
      if (!category3Id) {
        attrList.value = [];
        return;
      }

      loading.value = true;
      attrList.value = await getAttrListApi({
        category1Id: categoryStore.category1Id as number,
        category2Id: categoryStore.category2Id as number,
        category3Id: category3Id as number,
      });
      loading.value = false;
    },
    // 一上来触发
    // 从添加属性组件切换回来时会触发
    { immediate: true },
  );

  const showAddOrUpdateAttr = (attr: PickAttrModel) => {
    emits('setIsShowAttrList', false);
    emits('setCurrentAttr', attr);
  };
</script>
